<template>
  <view class="main">
    <view class="main_box" v-for="(item,index) in list" :key="index">
      <view class="main_box_head">
        <image :src="item.image" mode=""></image>
        <view class="main_box_content">
          <view class="content_head ellipsis">
            {{item.title}}
            <text class="content_des ellipsis2"> {{item.des}}</text>
          </view>
          <view class="content_footer">
            <view class="content_footer_left">{{item.read || 0}}人已看过 <text>{{item.address}}</text></view>
            <view class="content_footer_right">
              <view v-if="item.price == 0">免费</view>
              <view v-else><text>￥</text>{{item.price}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="main_box_footer">
        <scroll-view scroll-x class="main_box_footer_left">
          <view v-for="(titem,tidx) in item.tag" :key="tidx">#{{titem}}</view>
        </scroll-view>
        <button type="primary" class="main_box_footer_right" @tap="gotoUrl">立即报名</button>
      </view>
    </view>
  </view>
  <ys-tabbar :value="3" />
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { ref, reactive } from 'vue';
  const list = ref([])
  onLoad(() => {
    list.value.push(...reaulst)
    list.value.push(...reaulst)
    list.value.push(...reaulst)
    list.value.push(...reaulst)
  })
  const reaulst = [
    {
      image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，此处为课程描述此处为课程描述此处为课程描述此处为课程描述，此处为课程描述此处为课程描述，很多很多很多很多很...',
      read: 560,
      address: '陕西西安',
      o_price: 999,
      tag: ['互联网内容', '行业大咖', '互联网内容', '行业大咖', '互联网内容', '行业大咖'],
      price: 0,
    }, {
      image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很',
      read: 560, tag: ['互联网内容', '行业大咖'],
      o_price: 999,
      price: 666, address: '陕西西安',
    }, {
      image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      type: 3,
      title: '还在为教资高语笔试发愁？', tag: ['互联网内容', '成长营'],
      des: '此处为课程描述，很多很多很多很多很',
      read: 560,
      o_price: 999,
      price: 666, address: '陕西西安',
    },
  ]
  const params = reactive({
    pageIndex: 1,
    pageSize: 10
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  const gotoUrl = () => {
    uni.navigateTo({
      url: '/pages/offlineCourse/detail/detail'
    })
  }
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  const getList = () => {
    list.value.push(...reaulst)
    uni.stopPullDownRefresh()
  }
</script>

<style scoped lang="less">
  .main {
    padding: 0 30rpx;

    &_box {
      width: 690rpx;
      border-bottom: 1px solid rgba(#000, .1);
      margin-bottom: 40rpx;
      padding-bottom: 20rpx;
      box-sizing: border-box;

      &:last-child {
        border: 0;
        padding: 0;
        margin-bottom: 0;
      }

      &_head {
        display: flex;

        >image {
          width: 240rpx;
          height: 170rpx;
          background: #999999;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }

        .content_head {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
        }

        .content_des {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          margin-top: 18rpx;
        }
      }

      &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content_footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &_left {
            font-size: 24rpx;
            color: #999999;

            text {
              margin-left: 20rpx;
            }
          }

          &_right {
            font-weight: bold;
            color: #FA4058;
            font-size: 32rpx;
            display: flex;
            align-items: flex-end;

            text {
              font-size: 24rpx;
            }
          }
        }
      }

      &_footer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        white-space: nowrap;

        &_left {
          width: 530rpx;
          flex-wrap: nowrap;
          align-items: center;
          font-size: 24rpx;
          padding-right: 20rpx;
          color: #228CFE;
          box-sizing: border-box;

          view {
            height: 56rpx;
            display: inline-flex;
            margin-right: 35rpx;
            align-items: center;
          }
        }

        &_right {
          width: 160rpx;
          height: 56rpx;
          background: #228CFE;
          border-radius: 28rpx;
          font-size: 28rpx;
          color: #FFFFFF;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
        }
      }

    }
  }
</style>